<!DOCTYPE html>
<html>
<head>
    <title>课标助手</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }
        .chat-container {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
            margin: auto;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .chat-box {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .message {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }
        .message.user {
            justify-content: flex-end;
        }
        .message p {
            display: inline-block;
            padding: 0px;
            margin-bottom: 5px;
            border-radius: 10px;
            max-width: 100%;
            word-wrap: break-word;
        }
        .message.user p {
            background-color: #007bff;
            color: white;
            padding: 10px;
            max-width:70%;
        }
        .message.user .avatar {
            min-width: 40px;
            height: 40px;
            background-image: url('/static/user.png');
            background-size: cover;
            background-position: center;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-left: 10px;
            margin-top: 15px;
        }
        .message.response .avatar {
            min-width: 40px;
            height: 40px;
            background-image: url('/static/avatar.png');
            background-size: cover;
            background-position: center;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
        }
        .message.response .response-content {
            background-color: #f1f1f1;
            color: #333;
            padding: 10px;
            border-radius: 10px;
            max-width: 70%;
            display: inline-block;
            word-wrap: break-word;
        }
        form {
            display: flex;
            padding: 10px;
            border-top: 1px solid #eee;
        }
        input[type="text"] {
            flex: 1;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-right: 10px;
            font-size: 1rem;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            font-size: 1rem;
        }
        button:hover {
            background-color: #0056b3;
        }
        .chat-box .message.user:first-of-type {
    display: none;
}
    </style>
    <script src="/static/marked.min.js"></script>
    <script src="/static/purify.min.js"></script>
    <script>
        async function sendMessage(event) {
            event.preventDefault();
            const prompt = document.getElementById('prompt').value;
            if (!prompt.trim()) return;

            const chatBox = document.querySelector('.chat-box');
            chatBox.innerHTML += `
                <div class="message user">
                    <p>${prompt}</p>
                    <div class="avatar"></div>
                </div>
                <div class="message response">
                    <p>请等待...</p>
                </div>
            `;
            chatBox.scrollTop = chatBox.scrollHeight;

            document.getElementById('prompt').value = '';

            await fetch('/send', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `prompt=${encodeURIComponent(prompt)}`
            });

            pollResponses();
        }

        async function pollResponses() {
            const chatBox = document.querySelector('.chat-box');
            const response = await fetch('/get_responses');
            const data = await response.json();

            const shouldScroll = chatBox.scrollTop + chatBox.clientHeight >= chatBox.scrollHeight - 1;

            chatBox.innerHTML = '';
            data.chat_history.forEach(message => {
                if (message.response === '请等待...') {
                    chatBox.innerHTML += `
                        <div class="message user">
                            <p>${message.user}</p>
                            <div class="avatar"></div>
                        </div>
                        <div class="message response">
                            <p>${DOMPurify.sanitize(marked.parse(message.response))}</p>
                        </div>
                    `;
                } else {
                    chatBox.innerHTML += `
                        <div class="message user">
                            <p>${message.user}</p>
                            <div class="avatar"></div>
                        </div>
                        <div class="message response">
                            <div class="avatar"></div>
                            <div class="response-content">${DOMPurify.sanitize(marked.parse(message.response))}</div>
                        </div>
                    `;
                }
            });

            if (shouldScroll) {
                chatBox.scrollTop = chatBox.scrollHeight;
            }
        }

        // 页面加载时立即调用 pollResponses 以确保显示开场白
        document.addEventListener('DOMContentLoaded', pollResponses);

        setInterval(pollResponses, 1000); // 每隔1秒轮询一次
    </script>
</head>
<body>
    <div class="chat-container">
        <div class="chat-box">
        </div>
        <form onsubmit="sendMessage(event)">
            <input type="text" id="prompt" placeholder="请输入您的问题..." required>
            <button type="submit">发送</button>
        </form>
    </div>
</body>
</html>
